<template>
	<view class="content">
		<UniNavBar title="新增报修" />
		<view class="worp">
			<text class="title pb_30 mb_25">报修填报</text>
			<u--form labelPosition="left" class="u_form_box" :labelStyle="{color:'#000'}" :model="formData"
				:rules="rules" ref="uForm" :labelWidth="150">
				<view class="item mb_25">
					<view class="item_title mb_25">
						住户信息
					</view>
					<u-form-item label="住户号" prop="code" borderBottom @click="() =>showCode=true">
						<u--input v-model="formData.code" disabled disabledColor="#ffffff" placeholder="请选择户号"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</view>
				<view class="item mb_25">
					<view class="item_title mb_25">
						报修信息
					</view>
					<u-form-item label="报修人" prop="name" borderBottom>
						<u--input v-model="formData.name" disabled disabledColor="#ffffff" placeholder="请输入报修人姓名"
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="联系方式" prop="phone" borderBottom>
						<u--input v-model="formData.phone" disabled disabledColor="#ffffff" placeholder="请输入报修人联系方式"
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="预约日期" prop="date" borderBottom @click="() =>dateShow=true">
						<u--input v-model="formData.date" disabled disabledColor="#ffffff" placeholder="请选择预约日期"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="预约时间" prop="time" borderBottom @click="() =>timeShow=true">
						<u--input v-model="formData.time" disabled disabledColor="#ffffff" placeholder="请选择预约时间"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="报修类型" prop="type" borderBottom @click="() =>typeShow=true">
						<u--input v-model="formData.type" disabled disabledColor="#ffffff" placeholder="请选择报修类型"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="报修说明" labelPosition="top" prop="info" borderBottom>
						<u--textarea border="node" v-model="formData.info" placeholder="请输入报修说明"></u--textarea>
					</u-form-item>
					<u-form-item class="item_flex_c" label="相关图片" labelPosition="top" prop="name" borderBottom>
						<view class="placeholder">
							添加故障相关图片
						</view>
						<u-upload uploadIcon="plus" name="1" multiple :maxCount="10"></u-upload>
					</u-form-item>
				</view>
				<u-button class="custom-bnt" text="新增报修"></u-button>
			</u--form>
			<u-action-sheet :show="showCode" :actions="codes" title="请选择户号" @close="showCode = false"
				@select="codeSelect">
			</u-action-sheet>
			<u-datetime-picker :show="dateShow" v-model="formData.date" mode="date" @confirm="(e) =>confirm(e,'date')"
				closeOnClickOverlay @close="() =>dateShow=false"></u-datetime-picker>
			<u-datetime-picker :show="timeShow" v-model="formData.time" mode="time" @confirm="(e) =>confirm(e,'time')"
				closeOnClickOverlay @close="() =>timeShow=false"></u-datetime-picker>
			<u-action-sheet :show="typeShow" :actions="typs" title="请选择类型" @close="typeShow = false"
				@select="typeSelect">
			</u-action-sheet>
		</view>
	</view>
</template>

<script>
	import UniNavBar from "../../components/uniNavbar/index.vue"
	export default {
		components: {
			UniNavBar
		},
		data() {
			return {
				showCode: false,
				typeShow: false,
				dateShow: false,
				timeShow: false,
				formData: {
					code: '',

				},
				codes: Array.from(Array(5).keys()).map(v => {
					return {
						name: `000${v}小区`
					}
				}),
				typs: [{
					name: '一级维修'
				}],
				rules: {}
			};
		},
		methods: {
			codeSelect(e) {
				this.formData.code = e.name
				// this.$refs.uForm.validateField('userInfo.sex')
			},
			typeSelect(e) {

			},
			confirm(e, type) {
				if (type == 'date') {

					return
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		border-bottom: 1rpx solid rgba(0, 0, 0, .1);
		width: 100%;
		display: inline-block;
	}

	.item_title {
		font-size: 32rpx;
		font-weight: bold;
		color: #212121;
	}

	.placeholder {
		color: #AAAAAA;
		margin: 10rpx 0;
	}

	.custom-bnt {
		width: 660rpx;
		height: 80rpx;
		background: #6750F8;
		border-radius: 10rpx;
		color: #fff;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
</style>
<style lang="scss">

</style>